<!DOCTYPE html>
<html lang="zh" data-theme="light">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="favicon.svg" type="image/svg+xml">
    <title>MusicBox</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <noscript>
        <strong>MusicBox requires JavaScript to function properly. Please enable JavaScript to continue.</strong>
    </noscript>

    <!-- Loading screen -->
    <div id="loading" class="loading-screen">
        <div class="loading-spinner"></div>
        <div class="loading-text">MusicBox loading...</div>
        <div id="cache-loading-status" class="cache-loading-status" style="display: none;">
            正在从缓存加载音乐库...
        </div>
    </div>

    <!-- Main application -->
    <div id="app" class="app" style="display: none;">
        <!-- Navigation bar -->
        <nav id="navbar" class="navbar">
            <div class="navbar-content">
                <div class="navbar-left">
                    <button class="nav-button" id="back-btn" disabled>
                        <svg class="icon" viewBox="0 0 24 24">
                            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
                        </svg>
                    </button>
                    <button class="nav-button" id="forward-btn" disabled>
                        <svg class="icon" viewBox="0 0 24 24">
                            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
                        </svg>
                    </button>
                </div>

                <div class="navbar-center">
                    <div class="search-container">
                        <input type="text" id="search-input" placeholder="搜索..." class="search-input">
                        <svg class="search-icon" viewBox="0 0 24 24">
                            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                        </svg>
                    </div>
                </div>

                <div class="navbar-right">
                    <button class="nav-button" id="settings-btn">
                        <img class="icon" src="assets/icons/settings.svg" alt="设置">
                    </button>
                    <button class="nav-button" id="theme-toggle">
                        <img class="icon light-icon" src="assets/icons/light.svg" alt="切换到深色主题">
                        <img class="icon dark-icon" src="assets/icons/dark.svg" alt="切换到浅色主题" style="display: none;">
                    </button>
                    <button class="nav-button" id="minimize-btn">
                        <img class="icon" src="assets/icons/minimize.svg" alt="最小化">
                    </button>
                    <button class="nav-button" id="maximize-btn">
                        <img class="icon maximize-icon" src="assets/icons/maximize.svg" alt="最大化">
                        <img class="icon restore-icon" src="assets/icons/restore.svg" alt="还原" style="display: none;">
                    </button>
                    <button class="nav-button" id="close-btn">
                        <img class="icon" src="assets/icons/x.svg" alt="关闭应用">
                    </button>
                </div>
            </div>
        </nav>

        <!-- Sidebar -->
        <aside id="sidebar" class="sidebar">
            <!-- 侧边栏收缩/展开按钮 -->
            <div class="sidebar-toggle">
                <button class="sidebar-toggle-btn" id="sidebar-toggle-btn">
                    <img class="icon collapse-icon" src="assets/icons/arrow-left.svg" alt="收缩侧边栏">
                    <img class="icon expand-icon" src="assets/icons/menu.svg" alt="展开侧边栏">
                </button>
            </div>

            <div class="sidebar-content">
                <div class="sidebar-section">
                    <h3 class="sidebar-title">音乐库</h3>
                    <ul class="sidebar-menu">
                        <li>
                            <a href="#" class="sidebar-link active" data-view="home-page">
                                <img class="sidebar-icon" src="assets/icons/home.svg" alt="">
                                <span class="sidebar-text">首页</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="sidebar-link" data-view="library">
                                <svg class="sidebar-icon" viewBox="0 0 24 24">
                                    <path d="M12,3V12.26C11.5,12.09 11,12 10.5,12C8.01,12 6,14.01 6,16.5S8.01,21 10.5,21S15,18.99 15,16.5V6H19V3H12Z"/>
                                </svg>
                                <span class="sidebar-text">我的音乐</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="sidebar-link" data-view="artists">
                                <svg class="sidebar-icon" viewBox="0 0 24 24">
                                    <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
                                </svg>
                                <span class="sidebar-text">艺术家</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="sidebar-link" data-view="statistics">
                                <svg class="sidebar-icon" viewBox="0 0 24 24">
                                    <path d="M16,11.78L20.24,4.45L21.97,5.45L16.74,14.5L10.23,10.75L5.46,19H22V21H2V3H4V17.54L9.5,8L16,11.78Z"/>
                                </svg>
                                <span class="sidebar-text">统计</span>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="sidebar-section">
                    <h3 class="sidebar-title">播放列表</h3>
                    <ul class="sidebar-menu" id="playlists-menu">
                        <li>
                            <a href="#" class="sidebar-link" data-view="favorites">
                                <svg class="sidebar-icon" viewBox="0 0 24 24">
                                    <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"/>
                                </svg>
                                <span class="sidebar-text">收藏</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="sidebar-link" data-view="recent">
                                <svg class="sidebar-icon" viewBox="0 0 24 24">
                                    <path d="M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3Z"/>
                                </svg>
                                <span class="sidebar-text">最近播放</span>
                            </a>
                        </li>
                        <li>
                            <button class="sidebar-button" id="add-playlist-btn">
                                <svg class="sidebar-icon" viewBox="0 0 24 24">
                                    <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
                                </svg>
                                <span class="sidebar-text">创建新歌单</span>
                            </button>
                        </li>
                    </ul>
                </div>

                <!-- 用户歌单列表 -->
                <div class="sidebar-section" id="user-playlists-section" style="display: none;">
                    <h3 class="sidebar-title">我的歌单</h3>
                    <ul class="sidebar-menu" id="user-playlists-list">
                        <!-- 用户歌单将动态添加到这里 -->
                    </ul>
                </div>
            </div>
        </aside>

        <!-- Main content area -->
        <main id="main-content" class="main-content">
            <div id="content-area" class="content-area">
                <!-- Content will be dynamically loaded here -->
            </div>
        </main>

        <!-- Audio player -->
        <div id="player" class="player">
            <!-- Progress bar at the top -->
            <div class="progress-bar">
                <div class="progress-bar-container">
                    <div class="progress-track">
                        <div id="progress-fill" class="progress-fill"></div>
                        <div id="progress-handle" class="progress-handle"></div>
                        <div id="progress-tooltip" class="progress-tooltip">0:00</div>
                    </div>
                </div>
            </div>

            <!-- Controls section -->
            <div class="controls">
                <!-- Left: Track info -->
                <div class="playing">
                    <div class="container">
                        <img id="track-cover" class="track-cover" src="assets/images/default-cover.svg" alt="Album cover">
                        <div class="track-info">
                            <div id="track-title" class="track-name">未选择歌曲</div>
                            <div id="track-artist" class="track-artist">未知艺术家</div>
                        </div>
                        <div class="like-button">
                            <button class="button-icon" id="like-btn">
                                <img class="icon" src="assets/icons/heart.svg" alt="喜欢">
                            </button>
                        </div>
                    </div>
                    <div class="blank"></div>
                </div>

                <!-- Center: Playback controls -->
                <div class="middle-control-buttons">
                    <div class="blank"></div>
                    <div class="container">
                        <button class="button-icon" id="prev-btn">
                            <img class="icon" src="assets/icons/previous.svg" alt="上一首">
                        </button>
                        <button class="button-icon play" id="play-pause-btn">
                            <img class="icon play-icon" src="assets/icons/play.svg" alt="播放">
                            <img class="icon pause-icon" src="assets/icons/pause.svg" alt="暂停" style="display: none;">
                        </button>
                        <button class="button-icon" id="next-btn">
                            <img class="icon" src="assets/icons/next.svg" alt="下一首">
                        </button>
                    </div>
                    <div class="blank"></div>
                </div>

                <!-- Right: Additional controls -->
                <div class="right-control-buttons">
                    <div class="blank"></div>
                    <div class="container">
                        <button class="button-icon" id="lyrics-btn">
                            <img class="icon" src="assets/icons/arrow-up.svg" alt="歌词">
                        </button>
                        <button class="button-icon" id="playlist-btn">
                            <img class="icon" src="assets/icons/playlist.svg" alt="播放列表">
                        </button>
                        <button class="button-icon" id="play-mode-btn" title="播放模式">
                            <img class="icon mode-sequence" src="assets/icons/repeat.svg" alt="顺序播放">
                            <img class="icon mode-shuffle" src="assets/icons/shuffle.svg" alt="随机播放" style="display: none;">
                            <img class="icon mode-repeat-one" src="assets/icons/repeat-one.svg" alt="单曲循环" style="display: none;">
                        </button>
                        <button class="button-icon" id="desktop-lyrics-btn">
                            <img class="icon" src="assets/icons/desktop-lyrics.svg" alt="桌面歌词">
                        </button>
                        <div class="volume-control">
                            <button class="button-icon" id="volume-btn">
                                <img class="icon volume-high" src="assets/icons/volume.svg" alt="音量">
                                <img class="icon volume-half" src="assets/icons/volume-half.svg" alt="音量" style="display: none;">
                                <img class="icon volume-mute" src="assets/icons/volume-mute.svg" alt="静音" style="display: none;">
                            </button>
                            <div class="volume-bar">
                                <div class="volume-slider-container">
                                    <div class="volume-slider">
                                        <div id="volume-fill" class="volume-fill"></div>
                                        <div id="volume-handle" class="volume-handle"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Playlist Panel -->
        <div id="playlist-panel" class="playlist-panel" style="display: none;">
            <div class="playlist-header">
                <h3 class="playlist-title">播放队列</h3>
                <button class="playlist-close" id="playlist-close">
                    <svg class="icon" viewBox="0 0 24 24">
                        <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
                    </svg>
                </button>
            </div>
            <div class="playlist-content">
                <div class="playlist-info">
                    <span id="playlist-count">0 首歌曲</span>
                    <button class="playlist-clear" id="playlist-clear">清空</button>
                </div>
                <div class="playlist-tracks" id="playlist-tracks">
                    <!-- Playlist tracks will be dynamically added here -->
                </div>
            </div>
        </div>

        <!-- Context Menu -->
        <div id="context-menu" class="context-menu" style="display: none;">
            <div class="context-menu-item" id="context-play">
                <svg class="icon" viewBox="0 0 24 24">
                    <path d="M8,5.14V19.14L19,12.14L8,5.14Z"/>
                </svg>
                <span>播放</span>
            </div>
            <div class="context-menu-item" id="context-add-to-playlist">
                <svg class="icon" viewBox="0 0 24 24">
                    <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
                </svg>
                <span>添加到播放列表</span>
            </div>
            <div class="context-menu-item" id="context-add-to-custom-playlist">
                <svg class="icon" viewBox="0 0 24 24">
                    <path d="M13,2V8H21V2M13,9V15H21V9M13,16V22H21V16M3,2V8H11V2M3,9V15H11V9M3,16V22H11V16Z"/>
                </svg>
                <span>添加到歌单</span>
            </div>
            <div class="context-menu-divider"></div>
            <div class="context-menu-item" id="context-edit-info">
                <svg class="icon" viewBox="0 0 24 24">
                    <path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"/>
                </svg>
                <span>编辑歌曲信息</span>
            </div>
            <div class="context-menu-item" id="context-delete">
                <svg class="icon" viewBox="0 0 24 24">
                    <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/>
                </svg>
                <span>删除</span>
            </div>
        </div>

        <!-- Create Playlist Dialog -->
        <div id="create-playlist-dialog" class="modal-overlay" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">创建新歌单</h3>
                    <button class="modal-close-btn" id="create-playlist-close">
                        <svg class="icon" viewBox="0 0 24 24">
                            <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
                        </svg>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="playlist-name-input" class="form-label">歌单名称</label>
                        <input type="text" id="playlist-name-input" class="form-input" placeholder="请输入歌单名称" maxlength="50">
                        <div class="form-error" id="playlist-name-error" style="display: none;"></div>
                    </div>
                    <div class="form-group">
                        <label for="playlist-description-input" class="form-label">歌单描述（可选）</label>
                        <textarea id="playlist-description-input" class="form-textarea" placeholder="请输入歌单描述" maxlength="200" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" id="create-playlist-cancel">取消</button>
                    <button class="btn btn-primary" id="create-playlist-confirm" disabled>创建</button>
                </div>
            </div>
        </div>

        <!-- Add to Playlist Dialog -->
        <div id="add-to-playlist-dialog" class="modal-overlay" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">添加到歌单</h3>
                    <button class="modal-close-btn" id="add-to-playlist-close">
                        <svg class="icon" viewBox="0 0 24 24">
                            <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
                        </svg>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="playlist-list" id="playlist-selection-list">
                        <!-- 歌单列表将动态生成 -->
                    </div>
                    <div class="create-new-playlist-option">
                        <button class="btn btn-outline" id="create-new-playlist-option">
                            <svg class="icon" viewBox="0 0 24 24">
                                <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
                            </svg>
                            创建新歌单
                        </button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" id="add-to-playlist-cancel">取消</button>
                </div>
            </div>
        </div>

        <!-- Rename Playlist Dialog -->
        <div id="rename-playlist-dialog" class="modal-overlay" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">重命名歌单</h3>
                    <button class="modal-close-btn" id="rename-playlist-close">
                        <svg class="icon" viewBox="0 0 24 24">
                            <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
                        </svg>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="rename-playlist-input" class="form-label">歌单名称</label>
                        <input type="text" id="rename-playlist-input" class="form-input" placeholder="请输入新的歌单名称" maxlength="50">
                        <div class="form-error" id="rename-playlist-error" style="display: none;"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" id="rename-playlist-cancel">取消</button>
                    <button class="btn btn-primary" id="rename-playlist-confirm" disabled>重命名</button>
                </div>
            </div>
        </div>

        <!-- Music Library Selection Dialog -->
        <div id="music-library-selection-dialog" class="modal-overlay" style="display: none;">
            <div class="modal-dialog modal-dialog-large">
                <div class="modal-header">
                    <h3 class="modal-title">选择歌曲添加到歌单</h3>
                    <button class="modal-close-btn" id="music-library-close">
                        <svg class="icon" viewBox="0 0 24 24">
                            <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
                        </svg>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="library-selection-header">
                        <div class="search-container">
                            <input type="text" id="library-search-input" class="form-input" placeholder="搜索歌曲、艺术家或专辑...">
                            <svg class="search-icon" viewBox="0 0 24 24">
                                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                            </svg>
                        </div>
                        <div class="selection-controls">
                            <button class="btn btn-outline" id="select-all-tracks">全选</button>
                            <button class="btn btn-outline" id="clear-selection">清除选择</button>
                            <span class="selection-count">已选择 <span id="selected-count">0</span> 首歌曲</span>
                        </div>
                    </div>
                    <div class="library-track-list" id="library-track-list">
                        <!-- 音乐库歌曲列表将动态生成 -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" id="music-library-cancel">取消</button>
                    <button class="btn btn-primary" id="music-library-confirm" disabled>添加选中歌曲</button>
                </div>
            </div>
        </div>

        <!-- Settings Page -->
        <div id="settings-page" class="settings-page" style="display: none;">
            <div class="settings-container">
                <div class="settings-content">
                    <!-- 设置页面关闭按钮 -->
                    <button class="settings-close-btn" id="settings-close-btn">
                        <img class="icon" src="assets/icons/x.svg" alt="关闭">
                    </button>

                    <div class="settings-header">
                        <h1 class="settings-title">设置</h1>
                        <p class="settings-subtitle">个性化您的音乐体验</p>
                    </div>

                    <!-- 外观设置 -->
                    <div class="settings-section">
                        <h2 class="section-title">外观与显示</h2>
                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">语言</label>
                                <p class="item-description">选择界面显示语言</p>
                            </div>
                            <div class="item-control">
                                <select class="settings-select" id="language-select">
                                    <option value="zh-CN">简体中文</option>
                                    <option value="zh-TW">繁體中文</option>
                                    <option value="en">English</option>
                                </select>
                            </div>
                        </div>

                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">启用桌面歌词</label>
                                <p class="item-description">控制主界面桌面歌词按钮的显示，开启后可在播放器中使用桌面歌词功能</p>
                            </div>
                            <div class="item-control">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="desktop-lyrics-toggle" class="toggle-input">
                                    <label for="desktop-lyrics-toggle" class="toggle-label"></label>
                                </div>
                            </div>
                        </div>

                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">启用统计信息</label>
                                <p class="item-description">控制侧边栏统计按钮的显示，开启后可查看统计信息</p>
                            </div>
                            <div class="item-control">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="statistics-toggle" class="toggle-input">
                                    <label for="statistics-toggle" class="toggle-label"></label>
                                </div>
                            </div>
                        </div>

                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">启用最近播放</label>
                                <p class="item-description">控制侧边栏最近播放按钮的显示，开启后可查看最近播放的音乐</p>
                            </div>
                            <div class="item-control">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="recent-play-toggle" class="toggle-input">
                                    <label for="recent-play-toggle" class="toggle-label"></label>
                                </div>
                            </div>
                        </div>

                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">启用艺术家页面</label>
                                <p class="item-description">控制侧边栏艺术家按钮的显示，开启后可查看艺术家列表和详情</p>
                            </div>
                            <div class="item-control">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="artists-page-toggle" class="toggle-input">
                                    <label for="artists-page-toggle" class="toggle-label"></label>
                                </div>
                            </div>
                        </div>

                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">启用歌曲列表封面</label>
                                <p class="item-description">控制歌曲列表中歌曲封面的显示，开启后可显示歌曲列表中各首歌曲封面</p>
                            </div>
                            <div class="item-control">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="show-track-covers-toggle" class="toggle-input">
                                    <label for="show-track-covers-toggle" class="toggle-label"></label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 音频设置 -->
                    <div class="settings-section">
                        <h2 class="section-title">音频</h2>
                        <!-- 均衡器设置 -->
                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">均衡器</label>
                                <p class="item-description">启用音频均衡器以调节音频频率响应</p>
                            </div>
                            <div class="item-control">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="equalizer-toggle" class="toggle-input">
                                    <label for="equalizer-toggle" class="toggle-label"></label>
                                </div>
                            </div>
                        </div>

                        <div class="settings-item equalizer-settings" id="equalizer-settings">
                            <div class="item-info">
                                <label class="item-label">均衡器设置</label>
                                <p class="item-description">调节各频段的音频增益</p>
                            </div>
                            <div class="item-control">
                                <button class="settings-button" id="open-equalizer-btn">打开均衡器</button>
                            </div>
                        </div>
                    </div>

                    <!-- 播放设置 -->
                    <div class="settings-section">
                        <h2 class="section-title">播放</h2>
                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">自动播放（未实现）</label>
                                <p class="item-description">启动应用时自动播放上次的音乐</p>
                            </div>
                            <div class="item-control">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="autoplay-toggle" class="toggle-input">
                                    <label for="autoplay-toggle" class="toggle-label"></label>
                                </div>
                            </div>
                        </div>

                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">记住播放位置（未实现）</label>
                                <p class="item-description">重新打开应用时恢复上次的播放位置</p>
                            </div>
                            <div class="item-control">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="remember-position-toggle" class="toggle-input">
                                    <label for="remember-position-toggle" class="toggle-label"></label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 库设置 -->
                    <div class="settings-section">
                        <h2 class="section-title">音乐库</h2>
                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">音乐文件夹</label>
                                <p class="item-description">选择包含您音乐文件的文件夹</p>
                            </div>
                            <div class="item-control">
                                <button class="settings-button" id="select-folder-btn">选择文件夹</button>
                            </div>
                        </div>

                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">本地歌词目录</label>
                                <p class="item-description">选择包含歌词文件(.lrc)的文件夹</p>
                            </div>
                            <div class="item-control">
                                <div class="folder-path-container">
                                    <span class="folder-path" id="lyrics-folder-path">未选择</span>
                                    <button class="settings-button" id="select-lyrics-folder-btn">选择文件夹</button>
                                </div>
                            </div>
                        </div>

                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">封面缓存目录</label>
                                <p class="item-description">选择用于缓存歌曲封面的文件夹</p>
                            </div>
                            <div class="item-control">
                                <div class="folder-path-container">
                                    <span class="folder-path" id="cover-cache-folder-path">未选择</span>
                                    <button class="settings-button" id="select-cover-cache-folder-btn">选择文件夹</button>
                                </div>
                            </div>
                        </div>

                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">自动扫描（未实现）</label>
                                <p class="item-description">定期自动扫描音乐文件夹中的新文件</p>
                            </div>
                            <div class="item-control">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="auto-scan-toggle" class="toggle-input">
                                    <label for="auto-scan-toggle" class="toggle-label"></label>
                                </div>
                            </div>
                        </div>

                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">缓存统计</label>
                                <p class="item-description" id="cache-stats-description">查看音乐库缓存信息</p>
                            </div>
                            <div class="item-control">
                                <button class="settings-button" id="view-cache-stats-btn">查看统计</button>
                            </div>
                        </div>

                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">验证缓存</label>
                                <p class="item-description">检查缓存文件的有效性并清理无效条目</p>
                            </div>
                            <div class="item-control">
                                <button class="settings-button" id="validate-cache-btn">验证缓存</button>
                            </div>
                        </div>

                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">清空缓存</label>
                                <p class="item-description">删除所有缓存数据，下次启动将重新扫描</p>
                            </div>
                            <div class="item-control">
                                <button class="settings-button danger" id="clear-cache-btn">清空缓存</button>
                            </div>
                        </div>

                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">内嵌歌词测试</label>
                                <p class="item-description"></p>
                            </div>
                            <div class="item-control">
                                <button class="settings-button" id="test-embedded-lyrics-btn">测试内嵌歌词</button>
                            </div>
                        </div>
                    </div>

                    <!-- 网络磁盘设置 -->
                    <div class="settings-section">
                        <h2 class="section-title">网络磁盘</h2>

                        <!-- 网络磁盘功能开关 -->
                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">启用网络磁盘</label>
                                <p class="item-description">允许挂载SMB、WebDAV等网络磁盘，扫描网络音乐文件</p>
                            </div>
                            <div class="item-control">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="network-drive-toggle" class="toggle-input">
                                    <label for="network-drive-toggle" class="toggle-label"></label>
                                </div>
                            </div>
                        </div>

                        <!-- 网络磁盘配置容器 -->
                        <div id="network-drive-config" class="network-drive-config" style="display: none;">
                            <!-- 添加网络磁盘 -->
                            <div class="settings-item">
                                <div class="item-info">
                                    <label class="item-label">添加网络磁盘</label>
                                    <p class="item-description">配置新的网络磁盘连接</p>
                                </div>
                                <div class="item-control">
                                    <button class="settings-button" id="add-network-drive-btn">添加磁盘</button>
                                </div>
                            </div>

                            <!-- 已挂载的网络磁盘列表 -->
                            <div class="settings-item">
                                <div class="item-info">
                                    <label class="item-label">已挂载的磁盘</label>
                                    <p class="item-description">管理已连接的网络磁盘</p>
                                </div>
                                <div class="item-control">
                                    <div class="drives-header">
                                        <button class="settings-button secondary" id="refresh-drives-btn">刷新状态</button>
                                    </div>
                                    <div class="mounted-drives-list" id="mounted-drives-list">
                                        <div class="no-drives-message">暂无已挂载的网络磁盘</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 快捷键配置 -->
                    <div class="settings-section">
                        <h2 class="section-title">快捷键</h2>

                        <!-- 全局快捷键开关 -->
                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">启用全局快捷键</label>
                                <p class="item-description">允许在应用后台时使用快捷键控制播放</p>
                            </div>
                            <div class="item-control">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="global-shortcuts-toggle" class="toggle-input">
                                    <label for="global-shortcuts-toggle" class="toggle-label"></label>
                                </div>
                            </div>
                        </div>

                        <!-- 快捷键配置容器 -->
                        <div id="shortcuts-container" class="shortcuts-container">
                            <!-- 局内快捷键 -->
                            <div class="shortcuts-group">
                                <h3 class="shortcuts-group-title">应用内快捷键</h3>
                                <div class="shortcuts-list" id="local-shortcuts-list">
                                    <!-- 快捷键将通过JavaScript生成 -->
                                </div>
                            </div>

                            <!-- 全局快捷键 -->
                            <div class="shortcuts-group" id="global-shortcuts-group">
                                <h3 class="shortcuts-group-title">全局快捷键</h3>
                                <div class="shortcuts-list" id="global-shortcuts-list">
                                    <!-- 快捷键将通过JavaScript生成 -->
                                </div>
                            </div>
                        </div>

                        <!-- 快捷键操作按钮 -->
                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">重置快捷键</label>
                                <p class="item-description">将所有快捷键恢复为默认设置</p>
                            </div>
                            <div class="item-control">
                                <button class="settings-button danger" id="reset-shortcuts-btn">重置为默认</button>
                            </div>
                        </div>
                    </div>

                    <!-- 关于 -->
                    <div class="settings-section">
                        <h2 class="section-title">关于</h2>
                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">版本信息</label>
                                <p class="item-description">MusicBox v0.1.0-beta3</p>
                            </div>
                            <div class="item-control">
                                <button class="settings-button secondary" id="check-updates-btn">检查更新</button>
                            </div>
                        </div>
                        <div class="settings-item">
                            <div class="item-info">
                                <label class="item-label">MADE BY</label>
                                <p class="item-description">ASXE</p>
                            </div>
                            <div class="item-control">
                                <button class="settings-button secondary" id="MADE-BY">前往</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Edit Track Info Dialog -->
        <div id="edit-track-info-dialog" class="modal-overlay" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">编辑歌曲信息</h3>
                    <button class="modal-close-btn" id="edit-track-info-close">
                        <svg class="icon" viewBox="0 0 24 24">
                            <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
                        </svg>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="track-info-form">
                        <!-- 当前封面显示 -->
                        <div class="form-group cover-section">
                            <label class="form-label">专辑封面</label>
                            <div class="cover-container">
                                <img id="edit-track-cover" class="track-cover-preview" src="assets/images/default-cover.svg" alt="专辑封面">
                                <div class="cover-actions">
                                    <button type="button" class="btn btn-outline" id="select-cover-btn">
                                        <svg class="icon" viewBox="0 0 24 24">
                                            <path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"/>
                                        </svg>
                                        选择封面
                                    </button>
                                    <button type="button" class="btn btn-outline" id="remove-cover-btn">
                                        <svg class="icon" viewBox="0 0 24 24">
                                            <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/>
                                        </svg>
                                        移除封面
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 歌曲信息编辑 -->
                        <div class="form-group">
                            <label for="edit-track-title" class="form-label">歌曲名称</label>
                            <input type="text" id="edit-track-title" class="form-input" placeholder="请输入歌曲名称" maxlength="100">
                            <div class="form-error" id="edit-track-title-error" style="display: none;"></div>
                        </div>

                        <div class="form-group">
                            <label for="edit-track-artist" class="form-label">艺术家</label>
                            <input type="text" id="edit-track-artist" class="form-input" placeholder="请输入艺术家名称" maxlength="100">
                            <div class="form-error" id="edit-track-artist-error" style="display: none;"></div>
                        </div>

                        <div class="form-group">
                            <label for="edit-track-album" class="form-label">专辑名称</label>
                            <input type="text" id="edit-track-album" class="form-input" placeholder="请输入专辑名称" maxlength="100">
                            <div class="form-error" id="edit-track-album-error" style="display: none;"></div>
                        </div>

                        <!-- 可选的额外信息 -->
                        <div class="form-group">
                            <label for="edit-track-year" class="form-label">发行年份（可选）</label>
                            <input type="number" id="edit-track-year" class="form-input" placeholder="例如：2023" min="1900" max="2099">
                        </div>

                        <div class="form-group">
                            <label for="edit-track-genre" class="form-label">音乐类型（可选）</label>
                            <input type="text" id="edit-track-genre" class="form-input" placeholder="例如：流行、摇滚、古典" maxlength="50">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" id="edit-track-info-cancel">取消</button>
                    <button class="btn btn-primary" id="edit-track-info-confirm" disabled>保存更改</button>
                </div>
            </div>
        </div>

        <!-- Network Drive Configuration Modal -->
        <div id="network-drive-modal" class="modal-overlay" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">配置网络磁盘</h3>
                    <button class="modal-close-btn" id="network-drive-modal-close">
                        <svg class="icon" viewBox="0 0 24 24">
                            <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="network-drive-form">
                        <!-- 磁盘名称 -->
                        <div class="form-group">
                            <label for="drive-name">磁盘名称</label>
                            <input type="text" id="drive-name" class="form-input" placeholder="例如：我的音乐服务器" required>
                        </div>

                        <!-- 协议类型 -->
                        <div class="form-group">
                            <label for="drive-protocol">协议类型</label>
                            <select id="drive-protocol" class="form-select" required>
                                <option value="">请选择协议</option>
                                <option value="smb">SMB/CIFS</option>
                                <option value="webdav">WebDAV</option>
                            </select>
                        </div>

                        <!-- SMB配置 -->
                        <div id="smb-config" class="protocol-config" style="display: none;">
                            <div class="form-group">
                                <label for="smb-host">服务器地址</label>
                                <input type="text" id="smb-host" class="form-input" placeholder="例如：192.168.1.100">
                            </div>
                            <div class="form-group">
                                <label for="smb-share">共享名称</label>
                                <input type="text" id="smb-share" class="form-input" placeholder="例如：music">
                            </div>
                            <div class="form-group">
                                <label for="smb-domain">域名（可选）</label>
                                <input type="text" id="smb-domain" class="form-input" placeholder="例如：WORKGROUP">
                            </div>
                        </div>

                        <!-- WebDAV配置 -->
                        <div id="webdav-config" class="protocol-config" style="display: none;">
                            <div class="form-group">
                                <label for="webdav-url">WebDAV URL</label>
                                <input type="url" id="webdav-url" class="form-input" placeholder="例如：https://example.com/webdav">
                            </div>
                        </div>

                        <!-- 认证信息 -->
                        <div class="form-group">
                            <label for="drive-username">用户名</label>
                            <input type="text" id="drive-username" class="form-input" placeholder="用户名">
                        </div>
                        <div class="form-group">
                            <label for="drive-password">密码</label>
                            <input type="password" id="drive-password" class="form-input" placeholder="密码">
                        </div>

                        <!-- 测试连接状态 -->
                        <div id="connection-test-result" class="connection-test-result" style="display: none;">
                            <div class="test-status"></div>
                            <div class="test-message"></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="test-connection-btn">测试连接</button>
                    <button type="button" class="btn btn-secondary" id="network-drive-cancel">取消</button>
                    <button type="submit" class="btn btn-primary" id="network-drive-confirm" form="network-drive-form">添加磁盘</button>
                </div>
            </div>
        </div>

        <!-- Lyrics Page -->
        <div id="lyrics-page" class="lyrics-page" style="display: none;">
            <!-- 背景模糊层 -->
            <div class="lyrics-background"></div>

            <!-- 全屏按钮 -->
            <div class="lyrics-fullscreen-button">
                <button class="fullscreen-btn" id="lyrics-fullscreen">
                    <img class="icon fullscreen-icon" src="assets/icons/fullscreen.svg" alt="全屏">
                    <img class="icon fullscreen-exit-icon" src="assets/icons/fullscreen-exit.svg" alt="退出全屏" style="display: none;">
                </button>
            </div>

            <!-- 关闭按钮 -->
            <div class="lyrics-close-button">
                <button class="close-btn" id="lyrics-close">
                    <svg class="icon" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
                    </svg>
                </button>
            </div>

            <!-- 主要内容区域 -->
            <div class="lyrics-main">
                <!-- 左侧：封面和歌曲信息 -->
                <div class="lyrics-left-side">
                    <div class="lyrics-cover-section">
                        <!-- 封面容器 -->
                        <div class="lyrics-cover-container">
                            <img class="lyrics-cover-image" id="lyrics-cover-image" src="assets/images/default-cover.svg" alt="封面">
                            <div class="lyrics-cover-shadow"></div>
                        </div>

                        <!-- 歌曲信息 -->
                        <div class="lyrics-track-info">
                            <h2 class="lyrics-track-title" id="lyrics-track-title">歌曲标题</h2>
                            <p class="lyrics-track-artist" id="lyrics-track-artist">艺术家</p>
                        </div>

                        <!-- 扩展控制面板 -->
                        <div class="lyrics-function-area" id="lyrics-function-area">
                            <!-- 顶部：音量和播放模式控制 -->
                            <div class="top-controls">
                                <!-- 音量控制 -->
                                <div class="volume-control-section">
                                    <button class="button-icon volume-btn" id="lyrics-volume-btn">
                                        <img class="icon volume-icon" src="assets/icons/volume.svg" alt="音量">
                                        <img class="icon volume-half-icon" src="assets/icons/volume-half.svg" alt="音量" style="display: none;">
                                        <img class="icon volume-mute-icon" src="assets/icons/volume-mute.svg" alt="静音" style="display: none;">
                                    </button>
                                    <div class="volume-bar">
                                        <div class="volume-slider-container">
                                            <div class="volume-slider">
                                                <div id="lyrics-volume-fill" class="volume-fill"></div>
                                                <div id="lyrics-volume-handle" class="volume-handle"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 播放模式控制 -->
                                <div class="playmode-control-section">
                                    <button class="button-icon playmode-btn" id="lyrics-playmode-btn" title="播放模式">
                                        <img class="icon lyrics-mode-sequence" src="assets/icons/repeat.svg" alt="顺序播放">
                                        <img class="icon lyrics-mode-shuffle" src="assets/icons/shuffle.svg" alt="随机播放" style="display: none;">
                                        <img class="icon lyrics-mode-repeat-one" src="assets/icons/repeat-one.svg" alt="单曲循环" style="display: none;">
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 进度条 -->
                        <div class="lyrics-progress-section">
                            <div class="lyrics-progress-bar" id="lyrics-progress-bar">
                                <div class="lyrics-progress-track">
                                    <div class="lyrics-progress-fill" id="lyrics-progress-fill"></div>
                                    <div class="lyrics-progress-handle" id="lyrics-progress-handle"></div>
                                </div>
                            </div>
                            <div class="lyrics-time">
                                <span id="lyrics-current-time">0:00</span>
                                <span id="lyrics-duration">0:00</span>
                            </div>
                        </div>

                        <!-- 播放控制 -->
                        <div class="lyrics-controls">
                            <!-- 左侧控制按钮 -->
<!--                            <button class="button-icon" id="lyrics-repeat-btn" title="循环模式">-->
<!--                                <img class="icon" src="assets/icons/repeat.svg" alt="循环">-->
<!--                            </button>-->

                            <!-- 中间主要播放控制 -->
                            <div class="middle">
                                <button class="button-icon" id="lyrics-prev-btn">
                                    <img class="icon" src="assets/icons/previous.svg" alt="上一首">
                                </button>
                                <button class="button-icon play" id="lyrics-play-btn">
                                    <img class="icon play-icon" src="assets/icons/play.svg" alt="播放">
                                    <img class="icon pause-icon" src="assets/icons/pause.svg" alt="暂停" style="display: none;">
                                </button>
                                <button class="button-icon" id="lyrics-next-btn">
                                    <img class="icon" src="assets/icons/next.svg" alt="下一首">
                                </button>
                            </div>

                            <!-- 右侧控制按钮 -->
<!--                            <button class="button-icon" id="lyrics-shuffle-btn" title="随机播放">-->
<!--                                <img class="icon" src="assets/icons/shuffle.svg" alt="随机">-->
<!--                            </button>-->
                        </div>
                    </div>
                </div>

                <!-- 右侧：歌词显示 -->
                <div class="lyrics-right-side">
                    <div class="lyrics-container">
                        <div class="lyrics-display" id="lyrics-display">
                            <div class="lyrics-text">
                                <div class="lyrics-line-spacer"></div>
                                <p class="lyrics-line">暂无歌词</p>
                                <p class="lyrics-line">请欣赏音乐</p>
                                <div class="lyrics-line-spacer"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 均衡器弹窗 -->
    <div id="equalizer-modal" class="equalizer-modal" style="display: none;">
        <div class="equalizer-modal-content">
            <div class="equalizer-header">
                <h2 class="equalizer-title">音频均衡器</h2>
                <button class="equalizer-close" id="equalizer-close">
                    <img class="icon" src="assets/icons/x.svg" alt="关闭">
                </button>
            </div>

            <div class="equalizer-body">
                <!-- 预设选择 -->
                <div class="equalizer-presets">
                    <label class="preset-label">预设模式：</label>
                    <select class="preset-select" id="equalizer-preset-select">
                        <option value="flat">平坦</option>
                        <option value="pop">流行</option>
                        <option value="rock">摇滚</option>
                        <option value="classical">古典</option>
                        <option value="jazz">爵士</option>
                        <option value="vocal">人声增强</option>
                        <option value="bass">低音增强</option>
                        <option value="treble">高音增强</option>
                        <option value="electronic">电子音乐</option>
                        <option value="custom">自定义</option>
                    </select>
                    <button class="preset-manage-btn" id="manage-presets-btn">
                        <img class="icon" src="assets/icons/settings.svg" alt="管理预设">
                    </button>
                </div>

                <!-- 自定义预设管理 -->
                <div class="custom-presets-panel" id="custom-presets-panel" style="display: none;">
                    <div class="custom-presets-header">
                        <h3>自定义预设管理</h3>
                        <button class="close-panel-btn" id="close-presets-panel">×</button>
                    </div>

                    <div class="custom-presets-content">
                        <!-- 保存当前设置为新预设 -->
                        <div class="save-preset-section">
                            <h4>保存当前设置</h4>
                            <div class="save-preset-controls">
                                <input type="text" id="new-preset-name" placeholder="输入预设名称" maxlength="20">
                                <button class="preset-action-btn save-btn" id="save-preset-btn">保存</button>
                            </div>
                        </div>

                        <!-- 自定义预设列表 -->
                        <div class="custom-presets-list">
                            <h4>已保存的预设</h4>
                            <div class="presets-list-container" id="custom-presets-list">
                                <!-- 动态生成的预设列表 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 频段控制 -->
                <div class="equalizer-bands">
                    <div class="band-labels">
                        <span class="band-label">31Hz</span>
                        <span class="band-label">62Hz</span>
                        <span class="band-label">125Hz</span>
                        <span class="band-label">250Hz</span>
                        <span class="band-label">500Hz</span>
                        <span class="band-label">1kHz</span>
                        <span class="band-label">2kHz</span>
                        <span class="band-label">4kHz</span>
                        <span class="band-label">8kHz</span>
                        <span class="band-label">16kHz</span>
                    </div>

                    <div class="band-sliders">
                        <div class="band-slider-container">
                            <input type="range" class="band-slider" id="band-0" min="-12" max="12" value="0" step="0.5">
                            <span class="band-value" id="band-value-0">0dB</span>
                        </div>
                        <div class="band-slider-container">
                            <input type="range" class="band-slider" id="band-1" min="-12" max="12" value="0" step="0.5">
                            <span class="band-value" id="band-value-1">0dB</span>
                        </div>
                        <div class="band-slider-container">
                            <input type="range" class="band-slider" id="band-2" min="-12" max="12" value="0" step="0.5">
                            <span class="band-value" id="band-value-2">0dB</span>
                        </div>
                        <div class="band-slider-container">
                            <input type="range" class="band-slider" id="band-3" min="-12" max="12" value="0" step="0.5">
                            <span class="band-value" id="band-value-3">0dB</span>
                        </div>
                        <div class="band-slider-container">
                            <input type="range" class="band-slider" id="band-4" min="-12" max="12" value="0" step="0.5">
                            <span class="band-value" id="band-value-4">0dB</span>
                        </div>
                        <div class="band-slider-container">
                            <input type="range" class="band-slider" id="band-5" min="-12" max="12" value="0" step="0.5">
                            <span class="band-value" id="band-value-5">0dB</span>
                        </div>
                        <div class="band-slider-container">
                            <input type="range" class="band-slider" id="band-6" min="-12" max="12" value="0" step="0.5">
                            <span class="band-value" id="band-value-6">0dB</span>
                        </div>
                        <div class="band-slider-container">
                            <input type="range" class="band-slider" id="band-7" min="-12" max="12" value="0" step="0.5">
                            <span class="band-value" id="band-value-7">0dB</span>
                        </div>
                        <div class="band-slider-container">
                            <input type="range" class="band-slider" id="band-8" min="-12" max="12" value="0" step="0.5">
                            <span class="band-value" id="band-value-8">0dB</span>
                        </div>
                        <div class="band-slider-container">
                            <input type="range" class="band-slider" id="band-9" min="-12" max="12" value="0" step="0.5">
                            <span class="band-value" id="band-value-9">0dB</span>
                        </div>
                    </div>
                </div>

                <!-- 控制按钮 -->
                <div class="equalizer-controls">
                    <button class="equalizer-button secondary" id="equalizer-reset">重置</button>
                    <button class="equalizer-button primary" id="equalizer-apply">应用</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="js/cache-manager.js"></script>
    <script src="js/local-lyrics-manager.js"></script>
    <script src="js/embedded-lyrics-manager.js"></script>
    <script src="js/embedded-cover-manager.js"></script>
    <script src="js/local-cover-manager.js"></script>
    <script src="js/url-validator.js"></script>
    <script src="js/cover-update-manager.js"></script>
    <script src="js/web-audio-engine.js"></script>
    <script src="js/bundle.js"></script>
</body>
</html>
